﻿@page "/custom"

<h1>Custom Styling</h1>

<hr class="mb-5" />

<p>
    Custom CSS classes can be set globally or on a per modal basis to change the look of modals.
</p>

<div class="card mb-4">
    <h5 class="card-header">Setting on a per modal basis</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("var options = new ModalOptions() { Class = \"my-custom-class\" };")
                <br />
                @("Modal.Show<Confirm>(\"Custom Styling\", options);")
            </code>
        </p>
    </div>
</div>

<div class="card mb-4">
    <h5 class="card-header">Setting globally for all modals</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("<BlazoredModal Class=\"my-custom-class\" />")
            </code>
        </p>
    </div>
</div>

<button @onclick="ShowModalCustomStyle" class="btn btn-primary">Show Modal</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; }

    void ShowModalCustomStyle()
    {
        var options = new ModalOptions { Class = "blazored-prompt-modal" };
        Modal.Show<Confirm>("Custom Style", options);
    }

}